@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';

$sizes: 's', 'm', 'l';
$icons-sizes: (
  's': $icon-xs,
  'm': $icon-s,
  'l': $icon-s
);

.triggerClassName {
  --offset: #{$space-drop-list-drop-offset};

  display: block;
  width: 100%;
}

.calendarWrapper {
  width: 100%;
  height: 100%;

  &[data-size='s'] {
    min-width: 240px;
    min-height: 256px;
  }
  &[data-size='m'] {
    min-width: 280px;
    min-height: 308px;
  }
  &[data-size='l'] {
    min-width: 304px;
    min-height: 328px;
  }
}

.container {
  .calendarIcon {
    color: $sys-neutral-text-light;

    @each $size in $sizes {
      &[data-size='#{$size}'] {
        width: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
        height: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  &:hover, &:focus-within, &[data-focused] {
    .calendarIcon {
      color: $sys-neutral-text-support;
    }
  }

  &[data-disabled], &[data-readonly] {
    .calendarIcon {
      color: $sys-neutral-text-disabled;
    }
  }
}